<template>
    <BasePanel width="340px" height="100%" title="第三方服务机构">
        <template #rightTitle>
            <div @click.stop>
                <ElSelect
                    class="el-select-no-border"
                    style="width: 120px"
                    v-model="selectValue"
                    :suffixIcon="ArrowDownBold"
                >
                    <ElOption
                        v-for="item in selectOptions"
                        :key="item.label"
                        :value="item.value"
                        :label="item.label"
                    />
                </ElSelect>
            </div>
        </template>
        <template #default>
            <div class="panel-content">
                <BaseEcharts v-if="chartsOptions" :options="chartsOptions" />
            </div>
        </template>
    </BasePanel>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel/index.vue'
import { ArrowDownBold } from '@element-plus/icons-vue'
import BaseEcharts from '@/components/BaseEcharts/index.vue'
// import { useGlobalStore } from '@/store/global'
// import { getFpiAssetsFile } from '@/utils/tools'

// 全局数据
// const globalStore = useGlobalStore()

const selectValue = ref('环境检测')
const selectOptions = shallowRef([{ label: '环境检测', value: '环境检测' }])

const chartsOptions = shallowRef<any>(null)

const createChartsOptions = () => {
    const data = [
        { name: 'A等级', value: 7, color: 'rgba(3, 169, 244, 1)' },
        { name: 'B等级', value: 37, color: 'rgba(133, 201, 65, 1)' },
        { name: 'C等级', value: 28, color: 'rgba(217, 204, 76, 1)' },
        { name: 'D等级', value: 23, color: 'rgba(238, 142, 0, 1)' },
        { name: 'E等级', value: 13, color: 'rgba(225, 34, 52, 1)' },
    ]
    const total = data.reduce((a, b) => {
        return a + (b.value ?? 0)
    }, 0)

    chartsOptions.value = {
        grid: {
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: '8%',
            top: 'center',
            itemWidth: 16,
            itemHeight: 16,
            icon: 'rect',
            data,
            formatter: (name: string) => {
                const nameObj = data.find(c => c.name === name)
                if (nameObj) {
                    return `{name|${nameObj.name}}{num|${nameObj.value}}`
                }
                return ''
            },
            textStyle: {
                rich: {
                    name: {
                        width: 58,
                        fontSize: 16,
                        padding: [0, 0, 0, 0],
                        color: 'rgba(255, 255, 255, 1)',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                    },
                    num: {
                        fontSize: 16,
                        fontWeight: 400,
                        padding: [0, 10, 0, 10],
                        color: 'rgba(0, 221, 255, 1)',
                        width: 20,
                        align: 'right',
                        fontFamily: 'Oswald',
                    },
                },
            },
        },
        graphic: [
            // 设置饼图中间文字内容
            {
                type: 'text',
                left: '17%', // center不行 因为会飞到整个div的中间
                top: 'center',
                style: {
                    text: total,
                    textAlign: 'center',
                    fill: 'rgba(0, 222, 255, 1)',
                    fontSize: 28,
                    fontFamily: 'Oswald',
                },
            },
        ],
        series: [
            {
                name: '',
                type: 'pie',
                center: ['24%', '50%'],
                radius: ['70%', '90%'],
                avoidLabelOverlap: true,
                hoverAnimation: false,
                data,
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                },
            },
        ],
    }
}
onMounted(() => {
    createChartsOptions()
})
</script>

<style lang="scss" scoped>
.panel-content {
    width: 100%;
    height: 100%;
}
</style>
